<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				text-align: center;
			}

			.wrap {
				display: inline-block;
				position: relative;
				box-shadow: 0 0 4px #C79F5A;
			}

			.wrap span {
				display: inline-block;
			}

			.wrap span.red-ball {
				position: absolute;
				/* background-color: #EF6191; */
				opacity: 0.7;
				border-radius: 100%;
				transition: 0.4s;
			}

			.wrap span.red-ball:hover {
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<img src="4.jpg" alt="">
		</div>
		<input value="" id="input" />
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script>
			$(function() {
				function setRedBall(r) {
					var $wrap = $('.wrap');
					var radius = r;
					var w = radius * 2;
					var h = radius * 2;
					var x, y, offset;

					return function(e) {
						offset = $(this).offset();
						x = e.pageX - offset.left;
						y = e.pageY - offset.top;
						var value = $('#input').val();
						console.log(value)
						let $box = $('<span>'+ value +'</span>');
						$box.addClass("red-ball");
						$box.css({
							left: x - radius,
							top: y - radius,
							width: w,
							height: h,
						})
						$box.val(123)
						$box.appendTo(this);
					}
				}

				$('.wrap').on('click', setRedBall(20))
			})
		</script>
	</body>
</html>
